<template>
    <div class="shop_detail">
        <div class="detail_top">
            <div class="detail_header">
                <VanIcon name="wap-home-o" @click="toIndex" />
                <span class="header_text">网易严选</span>
                <VanIcon class="icon" name="search" @click="toSearch" />
                <VanIcon name="shopping-cart-o" />
            </div>
        </div>
        <img class="top_img" :src="skuInfo.skuDefaultImg" alt="">
        <div class="money_main">
            <div class="shop_money">
                <span class="shop_text">
                    <span class="shop_span">￥</span>{{ skuInfo.price }}</span>
                <div class="money_border">
                    <span>到手</span>
                    <span>￥</span>
                    <span class="money_dao">{{ skuInfo.price }}</span>
                    <span>></span>
                </div>
            </div>
        </div>
        
        <div class="shop_main">
            <div class="main_title">
                <div class="main_name">
                    {{ skuInfo.skuName }}
                </div>
                <div class="shop_logo">
                    <img class="logo_img" src="../../../public/5.jpeg" alt="">
                    <span>华纺</span>
                </div>
                <div class="shop_liyou">
                    推荐理由
                </div>
            </div>
            <div class="main_border">
                <div class="border_main">
                    <div class="border_title">1</div>
                    <div class="border_text">60支全棉贡缎 柔软舒适 细腻亲肤</div>
                </div>
                <div class="border_main">
                    <div class="border_title">1</div>
                    <div class="border_text">60支全棉贡缎 柔软舒适 细腻亲肤</div>
                </div>
            </div>
        </div>
        <div class="main_img">
            <img class="img" src="https://yanxuan.nosdn.127.net/static-union/16790249238cd1e9.png?imageView&quality=75" alt="">
        </div>

        <div class="delivery">
            <div class="delivery_money">邮费: &nbsp; 单件包邮</div>
            <div class="delivery_right">></div>
        </div>
        <div class="kong"></div>

        <div class="delivery">
            <div class="delivery_money">请选择规格数量</div>
            <div class="delivery_right">></div>
        </div>

        <div class="xian">
            <div class="delivery_money">限制: 该商品不可使用优惠券</div>
        </div>

        <div class="delivery">
            <div class="delivery_money">配送: &nbsp; 请选择配送地址</div>
            <div class="delivery_right">></div>
        </div>

        <van-swipe :autoplay="3000" lazy-render>
        <van-swipe-item v-for="image in images" :key="image">
            <img :src="image" />
        </van-swipe-item>
        </van-swipe>

        <div class="shop_list">
            <div class="shop_can">商品参数</div>
            <div class="list_item">
                <div class="mian">面料</div>
                <div class="quan">全棉</div>
            </div>
            <div class="list_item">
                <div class="mian">适用年龄</div>
                <div class="quan">3岁以上</div>
            </div>
            <div class="list_item">
                <div class="mian">适用季节</div>
                <div class="quan">四季</div>
            </div>
            <div class="list_item">
                <div class="mian">款式</div>
                <div class="quan">床单式</div>
            </div>
            <div class="list_item">
                <div class="mian">工艺</div>
                <div class="quan">AB版、贡缎</div>
            </div>
            <div class="list_item">
                <div class="mian">风格</div>
                <div class="quan">中式、现代简约</div>
            </div>
        </div>
        <van-popup
            v-model:show="showBottom"
            position="bottom"
            :style="{ height: '397.5px' }"
            >
            <div class="buy_main">
                <div class="main_header">
                    <img class="header_img" :src="skuInfo.skuDefaultImg" alt="">
                    <div class="header_text">
                        <p class="p1">价格:￥{{ skuInfo.price }} 到手￥{{ skuInfo.price }}</p>
                        <p class="p2">已选择: {{ count }}</p>
                    </div>
                </div>
                <div class="xh">
                    型号
                </div>
                <div class="xz">
                    <div class="xz_item active" v-for="(item,index) in skuInfo.skuSaleAttrValueList" :key="item.id">
                        <span class="xz_text">{{ item.saleAttrValueName }}</span>
                    </div>
                </div>
                <div class="xh">
                    数量
                </div>

                <div class="jj">
                    <div class="jian" @click="onJian">-</div>
                    <div class="sz">{{ count }}</div>
                    <div class="jia" @click="onJia">+</div>
                </div>
            </div>
            </van-popup>

        <div class="end">
            <van-button>
            <van-icon name="service-o" />
            </van-button>
            <van-button square type="default" @click="onBuy" >立即购买</van-button>
            <van-button type="danger" @click="toShopList">加入购物车</van-button>
        </div>


        <van-cell v-for="item in list" :key="item" :title="item" />

        <van-back-top />
    </div>
    


</template>
<script lang="ts">
  import router from '@/router';
import { showToast } from 'vant';
import { defineComponent } from 'vue';
  export default defineComponent({
    name:'Detail'
  })
</script>
<script lang="ts" setup>
import { computed, onMounted, ref } from 'vue';

import { useShopItemStore } from '@/stores/modules/cateShop';

import toShop from '@/api/cateShop'

import {storeToRefs} from 'pinia'

import { useRoute } from 'vue-router';
import { useRouter } from 'vue-router';

const $router = useRouter()

const router = useRoute()

const {id} = router.query

let showBottom = ref(false)

const count = ref(1)

const gb = ref(false)

const list = [...Array().keys()]

const images = [
    'https://yanxuan.nosdn.127.net/static-union/16790188129d9b90.jpg?quality=75&type=webp&imageView&thumbnail=750x0',
    'https://yanxuan.nosdn.127.net/static-union/1679560356693189.jpg?quality=75&type=webp&imageView&thumbnail=750x0'
]


// 点击切换到首页
const toIndex = () => {
  $router.push({
    name:'Index',
    path:'/index'
  })
}

// 点击切换搜索页
const toSearch = () => {
  $router.push({
    name:'Search',
    path:'/search'
  })
}

const useShopItemStor = useShopItemStore()
onMounted(() => {
    let arr = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,18,19,22]

    useShopItemStor.getShopItemList(Math.floor(Math.random() * (arr.length - 1 ) + 0))
    console.log(spuSaleAttrList)
})


const onBuy = () =>{
    showBottom.value = true
}

const onJian = () => {
    
    if(count.value <= 1) return
    count.value = count.value - 1
}

const onJia = () => {
    count.value = count.value + 1

}
const{skuInfo,spuSaleAttrList} =storeToRefs(useShopItemStor)

// 添加到购物车
const toShopList = () =>{
    let arr = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,18,19,22]
    toShop.postShopItem(Math.floor(Math.random() * (arr.length - 1 ) + 0))
    $router.push('/shopcart')
}
</script>

<style lang="less" scoped>
    .shop_detail{
        // height: 800px;
        .detail_top{
            position: sticky;
            z-index: 999;
            top: 0;
            .detail_header{
                padding-left: 12px;
                padding-right: 8px;
                .icon{
                    margin-right: 12px;
                    }
                height: 44px;
                background-color: #fafafa;
                display: flex;
                align-items: center;
                justify-content: space-between;
                .header_text{
                flex: 1;
                text-align: center;
                }
            }
        }
        .top_img{
            width: 375px;
            height: 375px;
            display: block;
        }
        .money_main{
            display: flex;
            align-items: center;
            height: 56px;
            background-color: #fa1e32;
            .shop_money{
                display: flex;
                align-items: center;
                .shop_text{
                    display: flex;
                    align-items: end;
                    font-weight: 600;
                    font-size: 28px;
                    color: #fff;
                    .shop_span{
                        font-size: 18px;
                        margin-left: 10px;
                    }
                }
                .money_border{
                    width: 85px;
                    height: 23px;
                    margin-left: 4px;
                    padding: 0 4px;
                    border-radius: 15px;
                    background-color: white;
                    display: flex;
                    align-items: center;
                    
                    span{
                        font-size: 12px;
                        color: #fa1e32;
                        font-weight: 600;

                        
                    }
                    .money_dao{
                        font-size: 16px;
                    }
                }
            }
        }
        .shop_main{
            height: 182.5px;
            background-color: white;
            padding: 13px 0 18px 15px;
            .main_title{
                height: 99.5px;
                // display: flex;
                margin-top: 7px;
                padding-right: 94px;
                .main_name{
                    font-size: 12px;
                    height: 48px;
                    width: 254px;
                    margin-bottom: 2px;
                }
                .shop_logo{
                width: 254px;
                height: 18px;
                margin-top: 3px;
                margin-bottom: 2.5px;
                display: flex;
                .logo_img{
                    width: 14px;
                    height: 14px;
                    margin-right: 4px;
                }
                span{
                    color: #7f7f7f;
                    font-size: 12px;
                    margin-right: 3px;
                }
                }
                .shop_liyou{
                    height: 18px;
                    width: 254px;
                    font-size: 12px;
                    color: #333;
                }
            }
            .main_border{
                flex-direction: column;
                width: 345px;
                height: 54px;
                background-color: #eee;
                border: 1px solid #ddd;
                display: flex;
                justify-content: center;
                .border_main{
                    padding-left: 10px;
                    width: 323px;
                    height: 18px;
                    display: flex;
                    align-items: center;
                    .border_title{
                        width: 10px;
                        height: 10px;
                        border-radius: 50%;
                        color: #dd1a21;
                        border: 1px solid #dd1a21;
                        font-size: 12px;
                        font-weight: 600;
                        text-align: center;
                        line-height: 10px;
                    }
                    .border_text{
                        font-size: 12px;
                        line-height: 18px;
                    }
                }
            }
            
        }
        .main_img{
            height: 83px;
            background-color: #eee;
            .img{
                height: 70px;
                margin-top: 13px;
                width: 100%;
            }
        }
        .delivery{
            height: 52px;
            display: flex;
            line-height: 52px;
            padding: 0 40px 0 15px;
            justify-content: space-between;
            .delivery_money{
                font-size: 14px;
            }
            .delivery_right{
                width: 25px;
                height: 25px;
            }
        }
        .kong{
            height: 10px;
            background-color: rgb(244,244,244);
        }
        .xian{
            height: 52px;
            display: flex;
            line-height: 52px;
            padding: 0 40px 0 15px;
            border-top: 1px solid #ddd;
            border-bottom: 1px solid #ddd;
            .delivery_money{
                font-size: 14px;
            }
        }
        .shop_list{
            height: 396px;
            padding: 15px;
            .shop_can{
                font-size: 14px;
                height: 46px;
                line-height: 46px;
                border-bottom: 2px dashed #ddd;
            }
            .list_item{
                font-size: 12px;
                display: flex;
                height: 46px;
                line-height: 46px;
                border-bottom: 2px dashed #ddd;
                .mian{
                    width: 74px;
                    height: 22px;
                    color: #ccc;
                }
            }
        }
        .van-popup{
            .buy_main{
                
                height: 397.5px;
                padding: 16.5px 15px 63px;
                .main_header{
                    display: flex;
                    height: 99px;
                    margin-bottom: 21px;
                    .header_img{
                    width: 98px;
                    height: 99px;
                    }
                    .header_text{
                        margin-left: 10px;
                        height: 99px;
                        width: 159px;
                        padding-top: 65px;
                        box-sizing: border-box;
                        
                        .p1{
                            font-size: 14px;
                            color: #dd1a21;
                        }
                        .p2{
                            font-size: 14px;
                        }
                    }
                }
                .xh{
                    height: 26px;
                    font-size: 14px;
                    padding-bottom: 6px;
                }
                .xz{
                    height: 102px;
                    padding-bottom: 10px;
                    display: flex;
                    flex-wrap: wrap;
                    .xz_item{
                        width: 110px;
                        height: 36px;
                        margin-right: 15px;
                        margin-bottom: 10px;
                        padding: 0 12px;
                        border: 2px solid black;
                        border-radius: 5px;
                        &.active{
                            color: #dd1a21;
                            border: 3px solid #dd1a21;
                        }
                        .xz_text{
                            font-size: 14px;
                            line-height: 36px;
                        }
                    }
                }
                .jj{
                    height: 44px;
                    padding-bottom: 10px;
                    display: flex;
                    .jian{
                        width: 42px;
                        height: 33px;
                        border: 1px solid #ccc;
                        align-items: center;
                        text-align: center;
                    }
                    .sz{
                        width: 62px;
                        height: 33px;
                        border: 1px solid #ccc;
                        align-items: center;
                        text-align: center;
                    }
                    .jia{
                        width: 42px;
                        height: 33px;
                        border: 1px solid #ccc;
                        align-items: center;
                        text-align: center;
                    }
                }
            }
        }
        .end{
            position: fixed;
            bottom: 0;
            display: flex;
            height: 52px;
            :deep(.van-button.van-button--default.van-button--normal.van-button--square){
                width: 148.5px;
                height: 52px;
            }
            :deep(.van-button.van-button--danger.van-button--normal){
                width: 148.5px;
                height: 52px;
            }
            :deep(.van-button.van-button--default.van-button--normal){
                width: 78px;
                height: 52px;
            }
        }
    }
</style>
